<template>
    <div>
        <div class="hbox">
      <van-image round width="100px" height="100px"  />
      <h2 @click="Login">未登录</h2>
    </div>
    <van-cell-group>
      <van-cell center is-link>
        <template #title>
          <van-icon name="coupon" />&nbsp;
          <span class="custom-title">卖座券</span>
        </template>
      </van-cell>
      <van-cell center is-link>
        <template #title>
          <van-icon name="cart-circle" />&nbsp;
          <span class="custom-title">组合红包</span>
        </template>
      </van-cell>
      <van-cell center is-link>
        <template #title>
          <van-icon name="gem" />&nbsp;
          <span class="custom-title">余额</span>
        </template>
        <template #right-icon>
          888.88元 &nbsp;&nbsp;
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-cell center is-link>
        <template #title>
          <van-icon name="setting" />&nbsp;
          <span class="custom-title">设置</span>
        </template>
      </van-cell>
    </van-cell-group>
    </div>
</template>
  
<script setup lang='ts'>
import { onMounted } from "vue";
const Login = () => {
  console.log(111);
}
onMounted(() => {
  // 这种封装，在其他页面使用的时候，都会非常的方便
  Login();
});
    
</script>
  
<style scoped lang='scss'>
  .hbox {
    display: flex;
    align-items: center;
    padding: 40px;
  
    h2 {
      font-size: 21px;
      margin-left: 20px;
    }
  }
</style>